new Vue({
    el: '#app',
    data() {
        return {
            title: '木耳产业大数据',
            nowTime: '',
            nowTimeInterval: null,
            GroupBasicInformation: {
                Amount: 0,
                Quantity: 0,
                Goodes: 0,
                Enterprise: 0
            },
            //
            ChannelChart: [],
            SaleCity: [],
            ProcureCity: [],
            Category: [],
            Categorys: [],
            PieChart: [],
            BarChart: [],
            Average: [],
            MapData:'',
            Qutantity: [],
            Wodry: 0,
            colors: ['#06a106', '#EDC951', '#FC9D9A', '#20a8fe', '#3299BB']
        }
    },
    mounted() {
        this.getReady();
        this.getTime();
        this.getData();
        this.nowTimeInterval = setInterval(() => {
            this.getTime();
        }, 1000);
        setInterval(() => {
            this.getData();
        }, 5000);
    },
    computed: {
        query() {
            return [this.SaleCity, this.ProcureCity]
        },
        convertToTenThousand() {
            return function (amount) {
                if (amount >= 10000) {
                    var tenThousand = Math.floor(amount / 10000);
                    var convertedAmount = tenThousand + "万";
                    return convertedAmount;
                } else {
                    return parseInt(amount);
                }
            }
        },
        thousands() {
            return function (params) {
                params = Number(params).toFixed(0)
                return params.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
            }
        },
    },
    watch: {
        query: {
            handler(val) {
                this.Wodry++
                if (this.Wodry == 2) {
                    setTimeout(this.getWodry);
                }
            }
        }
    },
    methods: {
        getReady() {
            var whei = $(window).width()
            $("html").css({ fontSize: whei / 22 });
            $(window).resize(function () {
                var whei = $(window).width();
                $("html").css({ fontSize: whei / 22 })
            });
        },
        getData() {
            const that = this;
            $.ajax({
                url: DomainName + '/GroupBasicInformation',
                type: 'GET',
                success: function (res) {
                    if (res.Status === 'success') {
                        if (that.GroupBasicInformation == res.Data) {
                            return
                        }
                        that.GroupBasicInformation = res.Data
                    }
                },
                complete: function (XMLHttpRequest) {
                    if (XMLHttpRequest.getResponseHeader("REDIRECT") == "REDIRECT") {
                        window.parent.document.location.href = "../../../" + XMLHttpRequest.getResponseHeader("CONTENTPATH");
                    }
                },
            })
            //各渠道销售占比
            $.ajax({
                url: DomainName + '/ChannelProportion',
                type: 'GET',
                success: function (res) {
                    res.Data.forEach(item => {
                        item.value = parseInt(item.value)
                    })
                    if (JSON.stringify(res.Data) == that.ChannelChart) {
                        return
                    }
                    that.ChannelChart = JSON.stringify(res.Data)
                    that.getChannelChart(res.Data)
                },
                complete: function (XMLHttpRequest) {
                    if (XMLHttpRequest.getResponseHeader("REDIRECT") == "REDIRECT") {
                        window.parent.document.location.href = "../../../" + XMLHttpRequest.getResponseHeader("CONTENTPATH");
                    }
                },
            })
            // 类别占比 
            $.ajax({
                url: DomainName + '/GroupCategoryProportion',
                type: 'GET',
                success: function (res) {
                    if (res.Status === 'success') {
                        if (that.Categorys == JSON.stringify(res.Category) && that.PieChart == JSON.stringify(res.Data)) {
                            return
                        }
                        that.Categorys = JSON.stringify(res.Category)
                        that.PieChart = JSON.stringify(res.Data)
                        that.getPieChart(res.Data, res.Category)
                    }
                },
                complete: function (XMLHttpRequest) {
                    if (XMLHttpRequest.getResponseHeader("REDIRECT") == "REDIRECT") {
                        window.parent.document.location.href = "../../../" + XMLHttpRequest.getResponseHeader("CONTENTPATH");
                    }
                },
            })
            //月统计
            $.ajax({
                url: DomainName + '/GroupMonthlytatistics',
                type: 'GET',
                success: function (res) {
                    that.BarChart = JSON.stringify(res.Amount)
                    that.Qutantity = JSON.stringify(res.Qutantity)
                    that.Average = JSON.stringify(res.Average)
                    if (that.BarChart == res.Amount && that.Qutantity == res.Qutantity && that.Average == res.Average) {
                        return
                    }
                    that.getBarChart(res.Amount, res.Qutantity, res.Average)
                },
                complete: function (XMLHttpRequest) {
                    if (XMLHttpRequest.getResponseHeader("REDIRECT") == "REDIRECT") {
                        window.parent.document.location.href = "../../../" + XMLHttpRequest.getResponseHeader("CONTENTPATH");
                    }
                },
            })
            //木耳类别销售排行
            $.ajax({
                url: DomainName + '/GroupSalesCategory',
                type: 'GET',
                success: function (res) {
                    if (res.Status === 'success') {
                        if (that.Category == res.Data) {
                            return
                        }
                        that.Category = res.Data
                    }
                },
                complete: function (XMLHttpRequest) {
                    if (XMLHttpRequest.getResponseHeader("REDIRECT") == "REDIRECT") {
                        window.parent.document.location.href = "../../../" + XMLHttpRequest.getResponseHeader("CONTENTPATH");
                    }
                },
            })
            // 销售
            $.ajax({
                url: DomainName + '/GroupProvincialSales',
                type: 'GET',
                success: function (res) {
                    if (that.SaleCity == that.getArrange(res.Data)) {
                        return
                    }
                    that.SaleCity = that.getArrange(res.Data)
                },
                complete: function (XMLHttpRequest) {
                    if (XMLHttpRequest.getResponseHeader("REDIRECT") == "REDIRECT") {
                        window.parent.document.location.href = "../../../" + XMLHttpRequest.getResponseHeader("CONTENTPATH");
                    }
                },
            })
            // 采购
            $.ajax({
                url: DomainName + '/GroupProvincialProcure',
                type: 'GET',
                success: function (res) {
                    if (that.ProcureCity == that.getArrange(res.Data)) {
                        return
                    }
                    that.ProcureCity = that.getArrange(res.Data)
                },
                complete: function (XMLHttpRequest) {
                    if (XMLHttpRequest.getResponseHeader("REDIRECT") == "REDIRECT") {
                        window.parent.document.location.href = "../../../" + XMLHttpRequest.getResponseHeader("CONTENTPATH");
                    }
                },
            })
            //地图
            $.ajax({
                url: DomainName + '/GroupMapChart',
                type: 'GET',
                success: function (res) {
                    if(that.MapData==JSON.stringify(res.Data)){
                        return
                    }
                    that.MapData = JSON.stringify(res.Data)
                    that.getMapChart(res.Data);
                },
                complete: function (XMLHttpRequest) {
                    if (XMLHttpRequest.getResponseHeader("REDIRECT") == "REDIRECT") {
                        window.parent.document.location.href = "../../../" + XMLHttpRequest.getResponseHeader("CONTENTPATH");
                    }
                },
            })
        },
        getTime() {
            let myDate = new Date();
            let myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
            let myMonth = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
            let myToday = myDate.getDate(); //获取当前日(1-31)
            let myDay = myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
            let myHour = myDate.getHours(); //获取当前小时数(0-23)
            let myMinute = myDate.getMinutes(); //获取当前分钟数(0-59)
            let mySecond = myDate.getSeconds(); //获取当前秒数(0-59)
            let week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            this.nowTime = myYear + '-' + this.fillZero(myMonth) + '-' + this.fillZero(myToday) + '-' + '  ' + this.fillZero(myHour) + ':' + this.fillZero(myMinute) + ':' + this.fillZero(mySecond) + '  ' + week[myDay] + '  ';
        },
        fillZero(str) {//时间补零
            var realNum;
            if (str < 10) { realNum = '0' + str; } else { realNum = str; }
            return realNum;
        },
        getArrange(data) {//调整数组
            let arr = [[], [], [], [], []]
            var sum = 0;
            for (let i = 0; i < Math.ceil(data.length / 5); i++) {
                var num = 0;
                data.slice(i * 5, (i + 1) * 5).forEach(item => {
                    sum++;
                    item["Ranking"] = sum;
                    arr[num].push(item);
                    num++;
                })
            }
            arr.forEach(item => {
                if (item.length != Math.ceil(data.length / 5)) {
                    item.push({})
                }
            })
            return arr;
        },
        getWodry() {
            var counter = 3000;
            var ulist = document.getElementById("package").getElementsByTagName("li");
            for (var i = 0; i < ulist.length; i++) {
                var liclass = ulist[i].className;
                $('.' + liclass).wodry({
                    animation: 'rotateX',
                    delay: counter,
                    animationDuration: 1000
                });
                if (counter > 3050) {
                    counter = 3000;
                } else {
                    counter += 10;
                }
            }
        },
        getChannelChart(data) {
            var myChart = echarts.init(document.getElementById('chart2'));
            var xdata = ['餐饮', "电商", "批发", "团购", '商超'];
            var option = {
                color: ["#8d7fec", "#5085f2", "#e75fc3", "#f87be2", "#f2719a", "#fca4bb", "#f59a8f", "#fdb301", "#57e7ec", "#cf9ef1"],
                legend: {
                    orient: "horizontal",
                    x: "center",
                    bottom: "-1%",
                    data: xdata,
                    itemWidth: 8,
                    itemHeight: 8,
                    textStyle: {
                        color: '#fff',
                        fontSize: 15
                    },
                    formatter: function (name) {
                        // return '' + name
                        return name
                    }
                },
                series: [{
                    type: 'pie',
                    clockwise: false, //饼图的扇区是否是顺时针排布
                    minAngle: 2, //最小的扇区角度（0 ~ 360）
                    radius: ["20%", "40%"],
                    center: ["50%", "45%"],
                    avoidLabelOverlap: false,
                    itemStyle: { //图形样式
                        normal: {
                            borderColor: '#ffffff',
                            borderWidth: 1,
                        },
                    },
                    label: {
                        normal: {
                            show: true,
                            position: 'bottom',
                            // formatter: function(data) {
                            //     return (data['name'] + "数量:" + data['value']);
                            // },
                            formatter: '{text|{b}}\n{c} ({d}%)',
                            rich: {
                                text: {
                                    color: "#fff",
                                    fontSize: 15,
                                    align: 'center',
                                    verticalAlign: 'middle',
                                },
                                value: {
                                    color: "#8693F3",
                                    fontSize: 15,
                                    align: 'center',
                                    verticalAlign: 'middle',
                                },
                            }
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: 15,
                                color: '#fff',
                            }
                        }
                    },
                    data
                }]
            };
            myChart.setOption(option);
            myChart.currentIndex = -1;
            setInterval(function () {
                var dataLen = option.series[0].data.length;
                // 取消之前高亮的图形
                myChart.dispatchAction({
                    type: 'downplay',
                    seriesIndex: 0,
                    dataIndex: myChart.currentIndex
                });
                myChart.currentIndex = (myChart.currentIndex + 1) % dataLen;
                // 高亮当前图形
                myChart.dispatchAction({
                    type: 'highlight',
                    seriesIndex: 0,
                    dataIndex: myChart.currentIndex
                });
            }, 1000);
            // 使用刚指定的配置项和数据显示图表。
            /*myChart.setOption(option);*/
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        },
        getPieChart(data, Category) {
            var myChart = echarts.init(document.getElementById('chart3'));
            var option = {
                "animation": true,
                "title": {
                    "x": "center",
                    "y": "center",
                    "textStyle": {
                        "color": "#fff",
                        "fontSize": 15,
                        "fontWeight": "normal",
                        "align": "center",
                        "width": "100px"
                    },
                    "subtextStyle": {
                        "color": "#fff",
                        "fontSize": 12,
                        "fontWeight": "normal",
                        "align": "center"
                    }
                },
                "legend": {
                    "width": "100%",
                    "left": "center",
                    "textStyle": {
                        "color": "#fff",
                        "fontSize": 9
                    },
                    "icon": "circle",
                    "right": "0",
                    "bottom": "0",
                    "padding": [15, 20],
                    "itemGap": 5,
                    "data": Category
                },
                "series": [
                    {
                        "type": "pie",
                        "radius": ["20%", "40%"],
                        "color": ["#FEE449", "#00FFFF", "#00FFA8", "#9F17FF", "#FFE400", "#F76F01", "#01A4F7", "#FE2C8A"],
                        "startAngle": 100,
                        "label": {
                            "normal": {
                                "rich": {
                                    "a": {
                                        "color": "#999",
                                        "lineHeight": 12,
                                        "align": "center"
                                    },
                                    "hr": {
                                        "borderColor": "#aaa",
                                        "width": "100%",
                                        "borderWidth": 1,
                                        "height": 0
                                    },
                                    "b": {
                                        "color": "#b3e5ff",
                                        "fontSize": 16,
                                        "lineHeight": 33
                                    },
                                    "c": {
                                        "fontSize": 14,
                                        "color": "#eee"
                                    },
                                    "per": {
                                        "color": "#FDF44E",
                                        "fontSize": 14,
                                        "padding": [5, 8],
                                        "borderRadius": 2
                                    }
                                },
                                "textStyle": {
                                    "color": "#fff",
                                    "fontSize": 10
                                }
                            }
                        },
                        "emphasis": {
                            "label": {
                                "show": true,
                                "formatter": "{b|{b}:}  {per|{d}%}  ",
                                "backgroundColor": "rgba(255, 147, 38, 0)",
                                "borderColor": "transparent",
                                "borderRadius": 4,
                                "rich": {
                                    "a": {
                                        "color": "#999",
                                        "lineHeight": 22,
                                        "align": "center"
                                    },
                                    "hr": {
                                        "borderColor": "#aaa",
                                        "width": "100%",
                                        "borderWidth": 1,
                                        "height": 0
                                    },
                                    "b": {
                                        "color": "#fff",
                                        "fontSize": 14,
                                        "lineHeight": 33
                                    },
                                    "c": {
                                        "fontSize": 14,
                                        "color": "#eee"
                                    },
                                    "per": {
                                        "color": "#FDF44E",
                                        "fontSize": 14,
                                        "padding": [5, 6],
                                        "borderRadius": 2
                                    }
                                }
                            }
                        },
                        data
                    }]
            }
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            myChart.currentIndex = -1;
            setInterval(function () {
                var dataLen = option.series[0].data.length;
                // 取消之前高亮的图形
                myChart.dispatchAction({
                    type: 'downplay',
                    seriesIndex: 0,
                    dataIndex: myChart.currentIndex
                });
                myChart.currentIndex = (myChart.currentIndex + 1) % dataLen;
                // 高亮当前图形
                myChart.dispatchAction({
                    type: 'highlight',
                    seriesIndex: 0,
                    dataIndex: myChart.currentIndex
                });
            }, 1000);

            window.addEventListener("resize", function () {
                myChart.resize();
            });
        },
        getBarChart(Sales, Procurement, Average) {
            var myChart = echarts.init(document.getElementById('chart4'));
            var colors = ['rgb(46, 199, 201)', 'rgb(90, 177, 239)', 'rgb(255, 185, 128)'];
            var option = {
                color: colors,

                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    },
                    formatter: function (params) {
                        // 系列
                        let html = params[0].name + "<br>";
                        for (var i = 0; i < params.length; i++) {
                            // 获取每个系列对应的颜色值
                            html += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' + params[i].color + ';"></span>';

                            // 通过判断指定系列增加 % 符号
                            if (option.series[params[i].seriesIndex].type == "line") {
                                html += params[i].seriesName + ": " + params[i].value + "%<br>";
                            } else {
                                html += params[i].seriesName + ": " + params[i].value + "<br>";
                            }
                        }
                        return html;
                    }
                },
                grid: {
                    right: '20%',
                    height: '45%',
                    bottom: '20%'
                },
                toolbox: {
                    feature: {
                        dataView: {
                            show: true,
                            readOnly: false
                        },
                        restore: {
                            show: true
                        },
                        saveAsImage: {
                            show: true
                        }
                    }
                },
                legend: {
                    textStyle: {
                        color: '#fff',
                        fontSize: 15
                    },
                    data: ['木耳销售额', '木耳销量', '平均值']
                },
                // 缩放组件
                /*dataZoom: {
                    type: 'slider'
                },*/
                xAxis: [{
                    type: 'category',
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLabel: {
                        formatter: '{value} ',
                        textStyle: {
                            color: "#ffffff", //X轴文字颜色
                            fontSize: 20
                        }
                    },
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                }],
                yAxis: [{
                    type: 'value',
                    name: '木耳销售额',
                    min: 0,
                    max: 250,
                    position: 'right',
                    axisLine: {
                        lineStyle: {
                            color: colors[0]
                        }
                    },
                    axisLabel: {
                        formatter: '{value} 元',
                        textStyle: {
                            fontSize: 10
                        }
                    }
                },
                {
                    type: 'value',
                    name: '木耳销量',
                    min: 0,
                    max: 35,
                    position: 'right',
                    offset: 70,
                    axisLine: {
                        lineStyle: {
                            color: colors[1]
                        }
                    },
                    axisLabel: {
                        formatter: '{value} 吨'
                    }
                },
                {
                    type: 'value',
                    name: '平均值',
                    min: 0,
                    max: 25,
                    position: 'left',
                    axisLine: {
                        lineStyle: {
                            color: colors[2]
                        }
                    },
                    axisLabel: {
                        formatter: '{value} 元/斤'
                    }
                }
                ],
                series: [{
                    name: '木耳销售额',
                    type: 'bar',
                    data: Sales,
                    itemStyle: {
                        normal: {
                            barBorderRadius: 2,
                        }
                    }
                },
                {
                    barGap: '-50%', // 增加偏移量使重叠显示
                    name: '木耳销量',
                    type: 'bar',
                    yAxisIndex: 1,
                    data: Procurement,
                    itemStyle: {
                        normal: {
                            barBorderRadius: 2
                        }
                    }
                },
                {
                    name: '平均值',
                    type: 'line',
                    yAxisIndex: 2,
                    data: Average,
                }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        },
        getGps(str){
            for (let key in geoCoordMap) {
                if (key.indexOf(str) != -1||str.indexOf(key) != -1) {
                    return geoCoordMap[key]
                }
            }
        },
        getMapChart(Data) {
            const that = this
            var myChart = echarts.init(document.getElementById('map'));
            var geoGpsMap = {};
            var colors = [[]];
            var colorIndex = 0;
            $(function () {
                var year = [];
                var mapData = []
                let num = 0;
                Data.forEach((item,index)=>{
                    if (num < that.colors.length) {
                        colors[colorIndex].push(that.colors[num])
                        num++
                    }else{
                        num=0
                        colors[colorIndex].push(that.colors[num])
                        num++
                    }
                    geoGpsMap[index+1+''] = that.getGps(item.City)
                    year.push(item.City)
                    mapData.push(item.Data)
                })
                /*柱子Y名称*/
                var categoryData = [];
                var barData = [];

                for (var i = 0; i < mapData.length; i++) {
                    mapData[i].sort(function sortNumber(a, b) {
                        return a.value - b.value
                    });
                    barData.push([]);
                    categoryData.push([]);
                    for (var j = 0; j < mapData[i].length; j++) {
                        barData[i].push(mapData[i][j].value1);
                        categoryData[i].push(mapData[i][j].name);
                    }
                }

                /*$.getJSON(uploadedDataURL, function(geoJson) {*/

                /*echarts.registerMap('china', geoJson);*/
                /*echarts.registerMap('china', geoJson);*/
                var convertData = function (data) {
                    var res = [];
                    for (var i = 0; i < data.length; i++) {
                        var geoCoord = geoCoordMap[data[i].name];
                        if (geoCoord) {
                            res.push({
                                name: data[i].name,
                                value: geoCoord.concat(data[i].value)
                            });
                        }
                    }
                    return res;
                };

                var convertToLineData = function (data, gps) {
                    var res = [];
                    for (var i = 0; i < data.length; i++) {
                        var dataItem = data[i];
                        var toCoord = geoCoordMap[dataItem.name];
                        //debugger;
                        var fromCoord = gps; //郑州
                        //  var toCoord = geoGps[Math.random()*3];
                        if (fromCoord && toCoord) {
                            res.push([{
                                coord: fromCoord,
                                value: dataItem.value
                            }, {
                                coord: toCoord,
                            }]);
                        }
                    }
                    return res;
                };

                var optionXyMap01 = {
                    timeline: {
                        data: year,
                        axisType: 'category',
                        autoPlay: true,
                        playInterval: 3000,
                        left: '10%',
                        right: '10%',
                        bottom: '-2%',
                        width: '80%',
                        //  height: null,
                        label: {
                            normal: {
                                textStyle: {
                                    color: '#ddd',
                                    fontSize: 20
                                }
                            },
                            emphasis: {
                                textStyle: {
                                    color: '#fff',
                                    fontSize: 20
                                }
                            }
                        },
                        symbolSize: 10,
                        lineStyle: {
                            color: '#555'
                        },
                        checkpointStyle: {
                            borderColor: '#777',
                            borderWidth: 2
                        },
                        controlStyle: {
                            showNextBtn: true,
                            showPrevBtn: true,
                            normal: {
                                color: '#666',
                                borderColor: '#666'
                            },
                            emphasis: {
                                color: '#aaa',
                                borderColor: '#aaa'
                            }
                        },

                    },
                    baseOption: {

                        animation: true,
                        animationDuration: 1000,
                        animationEasing: 'cubicInOut',
                        animationDurationUpdate: 1000,
                        animationEasingUpdate: 'cubicInOut',
                        grid: {
                            right: '4%',
                            top: '25%',
                            bottom: '20%',
                            width: '20%'
                        },
                        tooltip: {
                            trigger: 'axis', // hover触发器
                            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                                type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
                                shadowStyle: {
                                    color: 'rgba(150,150,150,0.1)' //hover颜色
                                }
                            }
                        },
                        geo: {
                            show: true,
                            map: 'china',
                            roam: true,
                            zoom: 1,
                            center: [113.83531246, 34.0267395887],
                            label: {
                                emphasis: {
                                    show: false
                                }
                            },
                            itemStyle: {
                                normal: {
                                    borderColor: 'rgba(147, 235, 248, 1)',
                                    borderWidth: 1,
                                    areaColor: {
                                        type: 'radial',
                                        x: 0.5,
                                        y: 0.5,
                                        r: 0.8,
                                        colorStops: [{
                                            offset: 0,
                                            color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
                                        }, {
                                            offset: 1,
                                            color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
                                        }],
                                        globalCoord: false // 缺省为 false
                                    },
                                    shadowColor: 'rgba(128, 217, 248, 1)',
                                    // shadowColor: 'rgba(255, 255, 255, 1)',
                                    shadowOffsetX: -2,
                                    shadowOffsetY: 2,
                                    shadowBlur: 10
                                },
                                emphasis: {
                                    areaColor: '#389BB7',
                                    borderWidth: 0
                                }
                            }
                        },
                    },
                    options: []

                };

                for (var n = 0; n < year.length; n++) {

                    optionXyMap01.options.push({
                        /*backgroundColor: '#013954',*/
                        title:


                            [{
                                text: '',
                                subtext: '   ',
                                left: '35%',
                                top: '15%',
                                textStyle: {
                                    color: '#fff',
                                    fontSize: 25
                                }
                            },
                            {
                                id: 'statistic',
                                text: year[n] + "数据统计情况",
                                left: '60.5%',
                                top: '8%',
                                textStyle: {
                                    color: '#fff',
                                    fontSize: 23
                                }
                            }
                            ],
                        xAxis: {
                            type: 'value',
                            scale: true,
                            position: 'top',
                            min: 0,
                            boundaryGap: false,
                            splitLine: {
                                show: false
                            },
                            axisLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            },
                            axisLabel: {
                                margin: 2,
                                textStyle: {
                                    color: '#aaa'
                                }
                            },
                        },
                        yAxis: {
                            type: 'category',
                            //  name: 'TOP 20',
                            nameGap: 16,
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: '#ddd'
                                }
                            },
                            axisTick: {
                                show: false,
                                lineStyle: {
                                    color: '#ddd'
                                }
                            },
                            axisLabel: {
                                interval: 0,
                                textStyle: {
                                    color: '#ddd'
                                }
                            },
                            data: categoryData[n]
                        },

                        series: [
                            //未知作用
                            {
                                //文字和标志
                                name: 'light',
                                type: 'scatter',
                                coordinateSystem: 'geo',
                                data: convertData(mapData[n]),
                                symbolSize: function (val) {
                                    return val[2] / 10;
                                },
                                label: {
                                    normal: {
                                        formatter: '{b}',
                                        position: 'right',
                                        show: true
                                    },
                                    emphasis: {
                                        show: true
                                    }
                                },
                                itemStyle: {
                                    normal: {
                                        color: colors[colorIndex][n]
                                    }
                                }
                            },
                            //地图？
                            {
                                type: 'map',
                                map: 'china',
                                geoIndex: 0,
                                aspectScale: 0.75, //长宽比
                                showLegendSymbol: false, // 存在legend时显示
                                label: {
                                    normal: {
                                        show: false
                                    },
                                    emphasis: {
                                        show: false,
                                        textStyle: {
                                            color: '#fff'
                                        }
                                    }
                                },
                                roam: true,
                                itemStyle: {
                                    normal: {
                                        areaColor: '#031525',
                                        borderColor: '#FFFFFF',
                                    },
                                    emphasis: {
                                        areaColor: '#2B91B7'
                                    }
                                },
                                animation: false,
                                data: mapData
                            },
                            //地图点的动画效果
                            {
                                //  name: 'Top 5',
                                type: 'effectScatter',
                                coordinateSystem: 'geo',
                                data: convertData(mapData[n].sort(function (a, b) {
                                    return b.value - a.value;
                                }).slice(0, 20)),
                                symbolSize: function (val) {
                                    return val[2] / 10;
                                },
                                showEffectOn: 'render',
                                rippleEffect: {
                                    brushType: 'stroke'
                                },
                                hoverAnimation: true,
                                label: {
                                    normal: {
                                        formatter: '{b}',
                                        position: 'right',
                                        show: true
                                    }
                                },
                                itemStyle: {
                                    normal: {
                                        color: colors[colorIndex][n],
                                        shadowBlur: 10,
                                        shadowColor: colors[colorIndex][n]
                                    }
                                },
                                zlevel: 1
                            },
                            //地图线的动画效果
                            {
                                type: 'lines',
                                zlevel: 2,
                                effect: {
                                    show: true,
                                    period: 4, //箭头指向速度，值越小速度越快
                                    trailLength: 0.1, //特效尾迹长度[0,1]值越大，尾迹越长重
                                    symbol: 'arrow', //箭头图标
                                    symbolSize: 5, //图标大小
                                },
                                lineStyle: {
                                    normal: {
                                        color: colors[colorIndex][n],
                                        width: 0.3, //尾迹线条宽度
                                        opacity: 0.8, //尾迹线条透明度
                                        curveness: .3 //尾迹线条曲直度
                                    }
                                },
                                data: convertToLineData(mapData[n], geoGpsMap[n + 1])
                            },
                            //柱状图
                            {
                                zlevel: 1.5,
                                type: 'bar',
                                symbol: 'none',
                                itemStyle: {
                                    normal: {
                                        color: colors[colorIndex][n]
                                    }
                                },
                                data: barData[n]
                            }
                        ]
                    })
                }
                myChart.setOption(optionXyMap01);
                /*});*/
            });
            // 使用刚指定的配置项和数据显示图表。
            //myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        }
    },
})
